<script setup>
import { ref, reactive, computed } from "vue";
import { ArrowLeft } from "@element-plus/icons-vue";
import logo from "@a/logo.svg";
import { site_name } from "@vp";
import { useChatStore } from "@s/chat";
import { storeToRefs } from "pinia";
const { userstatus } = storeToRefs(useChatStore());

var dialogFormVisible = computed(() => {
  return userstatus.value === 0;
})
  

const formLabelWidth = "50px";

const formloading = ref(false);

const form = reactive({
  username: "",
  password: "",
});
const chat = useChatStore();
const toggleClick = () => {
  chat.togglecanvas();
};

const backhome = () => {
  window.location.href = "/";
};

const toLogin = async () => {
  let params = {
    account: form.username,
    password: form.password,
  };
  formloading.value = true;
  let res = await chat.userLogin(params);
  if (res.code != 200) {
    ElMessage(res.message);
  }
  formloading.value = false;
};
</script>
<template>
  <nav
    class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row s-nav-top"
    style="
      align-items: center;
      display: flex;
      height: 60px;
      padding-left: 20px !important;
      padding-right: 20px !important;
    "
  >
    <el-page-header @back="backhome" style="width: 100%">
      <template #icon> </template>
      <template #content>
        <div class="flex items-center navbar-toggler">
          <span class="text-large font-600 mr-3"></span>
          <span
            class="text-sm mr-2"
            style="color: var(--el-text-color-regular)"
          >
            {{ site_name }}
          </span>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button v-if="dialogFormVisible">注册</el-button>
          <el-button type="primary" class="ml-2" v-if="dialogFormVisible">登录</el-button>
          <button
            class="navbar-toggler navbar-toggler-right d-lg-none align-self-center"
            type="button"
            @click="toggleClick"
          >
            <span class="mdi mdi-menu"></span>
          </button>
        </div>
      </template>
    </el-page-header>
    <el-dialog
      v-model="dialogFormVisible"
      title="登录"
      width="400px"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <div v-loading="formloading">
        <el-form :model="form">
          <el-form-item label="账号" :label-width="formLabelWidth">
            <el-input
              v-model="form.username"
              autocomplete="off"
              placeholder="请输入账号"
            />
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
            <el-input
              v-model="form.password"
              type="password"
              autocomplete="off"
              placeholder="请输入密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="toLogin" :loading="formloading">
            登录
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- <div -->
    <!--   class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center" -->
    <!-- > -->
    <!--   <el-button -->
    <!--     type="primary" -->
    <!--     style="margin-right: 10px" -->
    <!--     :icon="ArrowLeft" -->
    <!--     @click="backhome" -->
    <!--     >回到首页</el-button -->
    <!--   > -->
    <!--   {{ site_name }} -->
    <!-- </div> -->
    <!-- <div class="navbar-menu-wrapper d-flex align-items-stretch"> -->
    <!--   <button -->
    <!--     class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" -->
    <!--     type="button" -->
    <!--     @click="toggleClick" -->
    <!--   > -->
    <!--     <span class="mdi mdi-menu"></span> -->
    <!--   </button> -->
    <!-- </div> -->
  </nav>
</template>
<style scoped lang="scss">
.navbar {
  overflow-y: auto !important;
}
</style>
